<template>
	<view v-if="!isccccc">
		<view class="fixed" style="height: 100vh;overflow-y: scroll;padding-bottom: 120rpx;overflow-x: hidden;">
			<image src="http://7n.gl.file.91golf.com/3ca800f2dc1e4655ad2a352534eec493.png" mode="widthFix"
				style="width: 100%;position: relative;"></image>
			<view class="status-bar text-whtite flex" :style="[{'top':statusBarHeight+'px'}]">
				<u-icon name="arrow-left" @click="back()"></u-icon>
				<view class="title">老师详情</view>
			</view>
			<view class="teacher-card">
				<view class="info ">
					<view class="u-flex u-row-between">
						<view class="u-flex u-row-between">

							<img :src="teacher.face" alt="teacher.face" class="avatar round" mode="aspectFill"  />
							<view class="sign">
								<view style="display: flex;">
									<text class="name" style="font-weight: bolder;">{{teacher.nickName}}</text>
									<image v-if="teacher.isRenzhen" src="../../static/img/label-teacher-l.png"
										mode="widthFix" style="width: 100rpx;margin-left: 0rpx;margin-top: 8rpx;">
									</image>
								</view>
								<view class="flex lanmu">
									<view class="box">回答
										<text class="num">{{teacher.answerNum}}</text>
									</view>
									<view class="box box1">获赞
										<text class="num num1">{{teacher.likeNum}}</text>
									</view>
									<!-- <view class="box">粉丝
										<text class="num">{{teacher.fansNum}}</text>
									</view> -->
								</view>
							</view>
						</view>
						<!-- <view class="follow-btn text-center">
							<view v-if="teacher.follow" class="text-gray bg-black btn1">已关注</view>
							<view v-if="!teacher.follow" class="text-white bg-orange btn1">+关注</view>
						</view> -->
					</view>
					<view style="font-size: 28rpx;">
						<view style="margin: 10rpx 0;margin-top: 20rpx; font-size: 32rpx;font-weight: bolder;color: #000;">擅长领域</view>
						<!-- <u-collapse>
							<u-collapse-item :title="teacher.descs">
								<view class="collapse-item">
									{{teacher.descs}}
								</view>
							</u-collapse-item>
						</u-collapse> -->
						<u-read-more  show-height="200">
							<view style="font-size: 28rpx;">
								{{teacher.shangchang?teacher.shangchang:"暂无"}}
							</view>
							
						</u-read-more>
					</view>
					<view style="font-size: 28rpx;">
						<view style="margin: 10rpx 0;margin-top: 20rpx; font-size: 32rpx;font-weight: bolder;color: #000;">老师简介</view>
						<!-- <u-collapse>
							<u-collapse-item :title="teacher.descs">
								<view class="collapse-item">
									{{teacher.descs}}
								</view>
							</u-collapse-item>
						</u-collapse> -->
						<u-read-more  show-height="200">
							<view style="font-size: 28rpx;">{{teacher.descs}}</view>
							
						</u-read-more>
					</view>
					
				</view>
				<view class="line"></view>
				<view class="question-all">
					<view style="font-weight: bolder;">他的问答 ({{total}})</view>
					<view class="question-list">
						<view class="question-item" v-for="(item,index) in arr" @click="detail(item)">
							<view class=" flex ">
								<image src="../../static/img/sign-question.png" mode="widthFix" style="width: 40rpx;">
								</image>
								<view class="content qes" style="width: calc(100% - 42rpx);">
									{{item.liQuestions.content}}
								</view>
							</view>
							<view class="flex ans">
								<image src="../../static/img/sign-answer.png" mode="widthFix" style="width: 40rpx;">
								</image>
								<view class="content " style="width: calc(100% - 42rpx);">{{item.content}}</view>
							</view>
							<view class="time">于{{formatDate(item.createTime)}} 回答</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabbar  text-center text-white" @click="tiwen">
			<image src="../../static/img/ic-quiz.png"></image>
			<text>向他提问</text>
		</view>
	</view>
</template>

<script>
	import {
		getTeachInfo,
		getTeachList,
		getGoodsCollection,
		deleteGoodsCollection,
		deleteStoreCollection,
	} from "@/api/members.js";
	import {
		http,
		Method
	} from "@/utils/request.js";
	import storage from "@/utils/storage.js";
	import moment from 'dayjs';
	export default {
		data() {
			return {
				isccccc:true,
				statusBarHeight: 0,
				total: 0,
				page: 1,
				pagesize: 10,
				teacherId: null,
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				// teacher: {
				// 	"id": 11,
				// 	"produce": "我们单位买了一辆车，原价值26万，已计提折旧14万，卖价为4万，公司要求要做转账凭证，请问老师这张转账凭证怎么填写",
				// 	"avatar": "https://img0.baidu.com/it/u=2830253347,2392697328&fm=253&fmt=auto&app=138&f=JPG?w=342&h=500",
				// 	"name": "张美丽",
				// 	"answerNum": 986,
				// 	"likeNum": 684,
				// 	"fansNum": 987,
				// 	follow: true,
				// 	flag: true,
				// },
				teacher: {},
				arr: [],
				// arr: [{
				// 	"answer": "你这个之前抵扣过吧，这个几十买的，买的时候是一般纳税人么？",
				// 	"question": "我们单位买了一辆车，原价值26万，已计提折旧14万，卖价为4万，公司要求要做转账凭证，请问老师这张转账凭证怎么填写",
				// 	time: "05-31  12:00",
				// },{
				// 	"answer": "你这个之前抵扣过吧，这个几十买的，买的时候是一般纳税人么？",
				// 	"question": "我们单位买了一辆车，原价值26万，已计提折旧14万，卖价为4万，公司要求要做转账凭证，请问老师这张转账凭证怎么填写",
				// 	time: "05-31  12:30",
				// },{
				// 	"answer": "你这个之前抵扣过吧，这个几十买的，买的时候是一般纳税人么？",
				// 	"question": "我们单位买了一辆车，原价值26万，已计提折旧14万，卖价为4万，公司要求要做转账凭证，请问老师这张转账凭证怎么填写",
				// 	time: "05-31  12:30",
				// },{
				// 	"answer": "你这个之前抵扣过吧，这个几十买的，买的时候是一般纳税人么？",
				// 	"question": "我们单位买了一辆车，原价值26万，已计提折旧14万，卖价为4万，公司要求要做转账凭证，请问老师这张转账凭证怎么填写",
				// 	time: "05-31  12:30",
				// }]
			};
		},
		onLoad(options) {
			this.isccccc = uni.getStorageSync("isccccc");
			this.teacherId = options.id;
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.selTeachInfo();
			this.getMy();
		},
		onReady() {
			uni.hideLoading()
		},
		onReachBottom() {
			let page = this.page + 1;
			if (page * this.pagesize > this.total) {
				uni.showToast({
					icon: "none",
					title: "没有更多了"
				});
				return;
			}
			this.page = page;
			this.getMy();
		},
		methods: {
			tiwen() {
				uni.navigateBack({
					delta: 1
				})
				uni.$emit("changtab", 2)
			},
			detail(obj) {
				uni.navigateTo({
					url: "/pages/verticalnav/question-detail?id=" + obj.liQuestions.id,
				})
			},
			formatDate(longtime) {
				return moment(longtime).format("YYYY-MM-DD HH:mm:ss")
			},
			selTeachInfo() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				getTeachInfo(this.teacherId).then(res => {
					console.log("1111111111111111111", res)
					uni.hideLoading();
					this.teacher = res.data.result;
				})
			},
			async getMy() {
				let user = storage.getUserInfo();
				let params = {
					pageNumber: this.page,
					pageSize: this.pagesize,
					userId: this.teacherId
				}
				let res = await http.request({
					url: "/lili/liQuestionsDetail/wodehuida",
					method: Method.GET,
					needToken: true,
					params
				});
				this.total = res.data.result.total;
				let list = res.data.result.records;
				list = list.filter(item => {
					return item.liQuestions != null;
				})
				this.arr = this.arr.concat(list)

			},
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		z-index: 99;
		width: 100%;

		.status-bar {
			position: absolute;
			top: var(--status-bar-height);
			color: #fff;
			width: 100%;
			font-size: 36rpx;
			left: 20rpx;
			right: 0;
			height: 60rpx;
			line-height: 60rpx;

			.title {
				margin-left: 30%;
			}
		}

		.teacher-card {
			position: absolute;
			top: calc(var(--status-bar-height) + 60rpx + 60rpx);
			bottom: 0;
			width: calc(100% - 32rpx);
			padding: 0 30rpx;
			margin: 0 16rpx;
			background: #FFFFFF;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			font-size: 28rpx;
			height: calc(100vh - var(--status-bar-height) - 90rpx);

			.info {
				font-size: 24rpx;
				color: #999999;
				width: calc(100% - 0rpx);
				align-items: center;
				padding: 30rpx 0;

				.avatar {
					width: 144rpx;
					height: 144rpx;
				}

				.sign {
					color: #FF6A4A;
					font-size: 22rpx;

					.name {
						margin: 0 20rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #333333
					}

					.lanmu {
						padding: 20rpx 0 0 20rpx;
						color: #666666;

						.box {

							.num {
								padding: 0 15rpx;
								color: #000000;
							}

							.num1 {
								padding-right: 0;
							}
						}

						.box1 {
							padding: 0 20rpx;
							margin-right: 15rpx;
							border-left: 1rpx solid #E0E0E0;
							border-right: 1rpx solid #E0E0E0;
						}
					}
				}

				.follow-btn {
					font-size: 24rpx;
					position: relative;
					top: -24rpx;

					.btn1 {
						width: 88rpx;
						height: 36rpx;
						line-height: 36rpx;
						border-radius: 8rpx;
					}

					.bg-orange {
						background: #FF9240;
					}

					.bg-gray {
						background: #666666;
					}
				}

				.icon {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

			}

			.line {
				height: 8rpx;
				margin-bottom: 30rpx;
				background: #F1F2F3;
				width: 100%;
			}

			.question-all {
				font-size: 32rpx;

				.zonggong {
					font-weight: bold;
				}

				.question-list {
					.question-item {
						padding: 30rpx 0 15rpx;
						align-items: initial;
						color: #333333;

						border-bottom: 1rpx solid #DBDDE0;

						image {
							width: 35rpx;
							height: 35rpx;
							margin-right: 20rpx;
							position: relative;
							top: 10rpx;
						}

						.content {
							width: calc(100% - 55rpx);
						}

						.qes {
							font-size: 30rpx;
							line-height: 50rpx;
						}

						.ans {
							margin: 20rpx 0;
							font-size: 26rpx;

							image {
								top: 5rpx;
							}
						}

						.time {
							color: #999999;
							font-size: 24rpx;
							margin-left: 55rpx;
						}
					}
				}
			}
		}
	}

	.tabbar {
		position: fixed;
		bottom: 30rpx;
		width: calc(100% - 52rpx);
		margin: 0 26rpx;
		z-index: 1000;
		height: 80rpx;
		line-height: 80rpx;
		// background: linear-gradient(44deg, #FF9565, #FF7133);
		background: linear-gradient(44deg, #183c8d, #3c1264);
		box-shadow: 0rpx 1rpx 11rpx 1rpx rgba(0, 0, 0, 0.2800);
		border-radius: 100rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
			top: 5rpx;
		}
	}

	/deep/ .u-collapse-title {
		font-size: 26rpx;
		color: #666666;
	}

	/deep/ .u-collapse-content {
		font-size: 24rpx !important;
		color: #666666;
	}
</style>
